@import './reset.css';
@import './common.scss';
main {
    position: relative;
    margin: 8.19vw 0;
    .top {
        height: 5.07vw;
        background-color: #08cacc;
        span {
            display: inline-block;
            line-height: 5.07vw;
            padding-left: 3.96vw;
            font-family: FZLTHK--GBK1-0;
            font-size: 1.25vw;
            color: #ffffff;
        }
    }
    nav {
        height: 9.1vw;
        background-image: url('../img/u1.png');
        background-repeat: no-repeat;
        background-size: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        a {
            font-size: 0.97vw;
            padding: 0.5vw 1vw;
            background-color: #ffffff;
            color: #000;
            border-radius: 5vw;
            display: inline-block;
            margin: 0 2vw;
            &:hover {
                color: #fff;
                background-color: #08cacc;
                ;
            }
        }
    }
    .user {
        position: absolute;
        right: 2.5vw;
        top: 7.5vw;
        span {
            display: inline-block;
            font-family: HelveticaNeue-Light;
            font-size: 1.67vw;
            color: #ffffff;
            line-height: 3.82vw;
            padding-right: 1vw;
            vertical-align: top;
        }
        div {
            display: inline-block;
            width: 3.82vw;
            height: 3.82vw;
            overflow: hidden;
            img {
                width: 100%;
            }
        }
    }
    .content {
        width: 43.75vw;
        height: 36.67vw;
        margin: 5vw auto;
        display: flex;
        justify-content: center;
        .left {
            border-right: 2px dashed gray;
            width: 17.92vw;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .item {
                color: gray;
                display: flex;
                align-items: center;
                &:hover {
                    color: lightgreen;
                }
                i {
                    font-size: 6vw;
                }
                span {
                    font-size: 1vw;
                    padding-left: 1vw;
                }
            }
            .imgBox {
                padding-left: 2.5vw;
            }
        }
        .right {
            width: 25.69vw;
            height: 100%;
            vertical-align: top;
            text-align: right;
            .box {
                display: inline-block;
                width: 18.75vw;
                text-align: left;
                input {
                    box-sizing: border-box;
                    width: 100%;
                    height: 3.75vw;
                    background-color: #f7f7f7;
                    box-shadow: inset 0.03vw 0.06vw 0.07vw 0vw rgba(25, 30, 19, 0.05);
                    border: solid 0.07vw #ffffff;
                    margin: 0.94vw 0;
                    padding: 0.3vw;
                }
                button {
                    margin-top: 10.42vw;
                    width: 8.19vw;
                    height: 2.78vw;
                    border: solid 0.07vw #cacaca;
                    border-radius: 5vw;
                }
            }
        }
    }
}